<template>
    <div class="textElementOperate">
        <!-- 开始写第一个operate指示器啦 -->
        <BorderLine v-for="item in borderlines" :line="item" />
        <ResizeHandler class="resizeLeft" :style="resizeLeftStyle" />
        <ResizeHandler class="resizeRight" :style="resizeRightStyle" />
        <RotateHandler class="rotate" :style="rotateStyle" />
    </div>
</template>
<script setup>
import { storeToRefs } from 'pinia';
import { UseMainStore } from '@/stores/index';
import BorderLine from './BorderLine.vue';
import ResizeHandler from './ResizeHandler.vue';
import RotateHandler from './RotateHandler.vue'
import { onMounted, ref } from 'vue';
// 获取当前添加元素的原点位置
let { CreatingElement } = storeToRefs(UseMainStore());
let borderlines = ref([]);
let resizeLeftStyle = ref({});
let resizeRightStyle = ref({});
let rotateStyle = ref({})
let minX = CreatingElement.value.position[0]
let minY = CreatingElement.value.position[1]
let width = 200, height = 40, rectSize = 13;
function SetBorderlines() {
    let borderTop = {}, borderBottom = {}, borderLeft = {}, borderRight = {}
    borderTop = {
        left: minX + 'px',
        top: minY + 'px',
        width: width + 'px',
        type: 'top'
    }
    borderBottom = {
        left: minX + 'px',
        top: (minY + height) + 'px',
        width: width + 'px',
        type: 'bottom'
    }
    borderLeft = {
        left: minX + 'px',
        top: minY + 'px',
        height: height + 'px',
        type: 'left'
    }
    borderRight = {
        left: (minX + width) + 'px',
        top: minY + 'px',
        height: height + 'px',
        type: 'right'
    }
    borderlines.value.push(borderTop);
    borderlines.value.push(borderBottom);
    borderlines.value.push(borderLeft);
    borderlines.value.push(borderRight);
}
function SetResizeHandler() {
    resizeLeftStyle = {
        left: (minX - (rectSize / 2)) + 'px',
        top: (minY + height / 3) + 'px',
        width: rectSize + 'px',
        height: rectSize + 'px'
    }
    resizeRightStyle = {
        left: (minX + width - (rectSize / 2)) + 'px',
        top: (minY + height / 3) + 'px',
        width: rectSize + 'px',
        height: rectSize + 'px'
    }
    rotateStyle = {
        left: (minX + width / 2) + 'px',
        top: (minY - 20) + 'px',//20 垂直方向偏移量
        width: rectSize + 'px',
        height: rectSize + 'px'
    }
}
onMounted(() => {
    // 初始化line
    SetBorderlines();
    // 初始化resi指示器
    SetResizeHandler();
})
</script>
<style lang="scss" scoped>
.textElementOperate {
    //  position: absolute;
}

.resizeLeft {
    left: -10%;
}
</style>